<template>
	<view class="content" :style="[{paddingTop:topHeight}]">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar bgColor="#0277de" :fixed="true" titleStyle="color:#fff" :height="sHeight">
			<view class="u-nav-slot" slot="left">
				<view class="nav-serch" :style="[{width:navWidth,height:navHeight}]"
					@click="goPath('/pages/serch/serch')">
					输入客户名称/手机号/订单号/商品搜索
				</view>
			</view>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar bgColor="#0277de" :fixed="true" title="订单" titleStyle="color:#fff">
			<view class="u-nav-slot" slot="left">

			</view>
			<view class="u-nav-slot" slot="right">
				<image @click="goPath('/pages/serch/serch')" :src="$IMG_URL+'search_white.png'"
					style="width: 46rpx;height: 46rpx;margin-right: 10rpx;">
				</image>
			</view>
		</u-navbar>
		<!-- #endif -->
		<view class="hom-top">
			<view class="flex-row top-text">
				<view>提醒处理订单</view>
				<view style="margin-left: auto;color: #FAC10D;" @click="goPath('/pages/website/website')">特约网点加盟申请
				</view>
			</view>
			<view class="flex-row" style="margin-top: 41rpx;justify-content: space-between;">
				<view class="top-item" @click="orderGo('今日上门')">
					<div style="position: relative;">
						<image :src="$IMG_URL+'today.png'"></image>
						<u-badge absolute :offset='[-8, -10]' bgColor="#FF3902" numberType="overflow" type="warning"
							max="999" value="99"></u-badge>
					</div>
					<view class="item-title">今日上门</view>

				</view>
				<view class="top-item" @click="orderGo('明日上门')">
					<div style="position: relative;">
						<image :src="$IMG_URL+'tomorrow.png'"></image>
						<u-badge absolute :offset='[-8, -10]' bgColor="#FF3902" numberType="overflow" type="warning"
							max="999" value="99"></u-badge>
					</div>

					<view class="item-title">明日上门</view>
				</view>
				<view class="top-item" @click="orderGo('客催单')">
					<div style="position: relative;">
						<image :src="$IMG_URL+'guestReminder.png'"></image>
						<u-badge absolute :offset='[-8, -10]' bgColor="#FF3902" numberType="overflow" type="warning"
							max="999" value="99"></u-badge>
					</div>

					<view class="item-title">客催单</view>
				</view>
			</view>
			<view class="flex-row" style="margin-top: 41rpx;justify-content: space-between;">
				<view class="top-item" @click="orderGo('超时单')">
					<div style="position: relative;">
						<image :src="$IMG_URL+'timeOut.png'"></image>
						<u-badge absolute :offset='[-6, -10]' bgColor="#FF3902" numberType="overflow" type="warning"
							max="999" value="99"></u-badge>
					</div>

					<view class="item-title">超时单</view>
				</view>
				<view class="top-item" @click="orderGo('退单')">
					<div style="position: relative;">
						<image :src="$IMG_URL+'refund.png'"></image>
						<u-badge absolute :offset='[-6, -10]' bgColor="#FF3902" numberType="overflow" type="warning"
							max="999" value="99"></u-badge>
					</div>

					<view class="item-title">退单</view>
				</view>
				<view class="top-item" @click="orderGo('售后单')">
					<div style="position: relative;">
						<image :src="$IMG_URL+'after-sales.png'"></image>
						<u-badge absolute :offset='[-6, -10]' bgColor="#FF3902" numberType="overflow" type="warning"
							max="999" value="99"></u-badge>
					</div>

					<view class="item-title">售后单</view>
				</view>
			</view>
		</view>
		<view class="home-middle">
			<view class="flex-row" style="justify-content: space-between;">
				<view class="middle-item" @click="orderGo('待预约')">
					<view>0</view>
					<view class="item-title">待预约</view>
				</view>
				<view class="middle-item" @click="orderGo('待上门')">
					<view>0</view>
					<view class="item-title">待上门</view>
				</view>
				<view class="middle-item" @click="orderGo('施工验收')">
					<view>0</view>
					<view class="item-title">施工验收</view>
				</view>

			</view>
			<view class="flex-row" style="justify-content: space-between;margin-top: 15px;">
				<view class="middle-item" @click="orderGo('待验收')">
					<view>0</view>
					<view class="item-title">待验收</view>
				</view>
				<view class="middle-item" @click="orderGo('已完结')">
					<view>0</view>
					<view class="item-title">已完结</view>
				</view>
				<view class="middle-item" @click="orderGo('已取消')">
					<view>0</view>
					<view class="item-title">已取消</view>
				</view>

			</view>
		</view>
		<u-sticky bgColor="#F7F9FC" style="width: 100%;" :offsetTop="topHeight">
			<u-tabs :list="tabList" @change="changeTab" :scrollable="false"></u-tabs>
		</u-sticky>
		<div style="margin-top: 23rpx;">
			<view class="order-list" v-for="(item,index) in orderList" :key="index" @click="goDetail(item)">
				<view class="mine-avatar">
					<image :src="src" mode="aspectFill"
						style="width: 160rpx;height: 160rpx;border-radius: 8rpx;flex-shrink: 0;">
					</image>
					<view class="avatar-text">
						<view class="flex-row">
							<view style="font-weight: 500;font-size: 27rpx;color: #000000;">{{item.attacheUserName}}
							</view>
							<view style="color: #0277DE;font-size: 27rpx;margin-left: auto;">施工验收</view>
						</view>
						<view class="text-ovew">河南省郑州市河南省郑州市河南省郑州市河南省郑州市</view>
						<view>数量：1</view>
						<view>下单时间：2024-03-10 08:40:39</view>
					</view>

				</view>
				<view class="order-pay">订单收益：￥200.00</view>
				<view class="order-but">
					<view class="but-list">
						<view class="but-item">
							<u-button :plain="true" shape="circle" text="确定"></u-button>
						</view>
						<view class="but-item">
							<u-button type="primary" shape="circle" text="镂空"></u-button>
						</view>
					</view>


				</view>
			</view>
			<u-loadmore :status="status" />
		</div>

	</view>
</template>

<script>
	import {
		homeOrderApi,
		shouyeApi,
		orderApi
	} from '@/api/user'
	export default {
		data() {
			return {
				showA: true,
				sHeight: 44,
				topHeight: '90px',
				navWidth: '0',
				navHeight: '0',
				src: "https://cdn.uviewui.com/uview/album/2.jpg",
				isLoadMore: false,
				pageNum: 1,
				pageSize: 10,
				orderList: [],
				status: 'loading',
				orderType: 1,
				tabList: [{
					name: '抢单单池',
					orderType: 1,
					badge: {
						value: 0,
					}
				}, {
					name: '报价单池',
					orderType: 2,
					badge: {
						value: 0,
					}
				}, {
					name: '平台指派',
					orderType: 3,
					badge: {
						value: 0,
					}
				}, ],
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			const menu = uni.getMenuButtonBoundingClientRect()
			this.sHeight = (menu.top - uni.$u.sys().statusBarHeight) * 2 + menu.height
			this.topHeight = uni.$u.sys().statusBarHeight + this.sHeight + 'px'
			console.log(uni.getMenuButtonBoundingClientRect());
			console.log(uni.$u.sys());
			this.navHeight = menu.height + 'px'
			this.navWidth = menu.left - 26 + 'px'
			console.log(this.navWidth, menu.height);
			console.log((menu.top - uni.$u.sys().statusBarHeight) * 2 + menu.height);
			// #endif
			// #ifndef MP-WEIXIN
			this.topHeight = uni.$u.sys().statusBarHeight + 44 + 'px'
			// #endif

		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/logoin/logoin'
				})
			} else {

				this.getShouye()
				this.getIndex()
			}
		},
		onReachBottom() {
			if (!this.isLoadMore) {
				//此处判断，上锁，防止最后一页还触发
				this.isLoadMore = true;
				this.status = 'loading'
				this.pageNum++;
				this.getList();

			}
		},
		onPullDownRefresh() {
			this.status = 'loading'
			this.orderList = []
			this.pageNum = 1;
			this.getShouye()
			this.getIndex()
		},
		methods: {
			async getList() {
				try {
					const res = await homeOrderApi({
						pageSize: this.pageSize,
						pageNum: this.pageNum,
						type: this.orderType
					})
					this.orderList = [...this.orderList, ...res.rows]
					if (this.orderList.length == res.total || this.orderList.length == 0) { // 翻的页数 等于 最后一页 时显示没有更多
						this.status = 'nomore' // 没有更多了
						this.isLoadMore = true
					} else {
						this.status = 'loadmore' //继续加载
						this.isLoadMore = false //打开下拉开关
					}
					uni.stopPullDownRefresh();
				} catch (e) {
					console.log(9999, e);
				}

			},
			async getShouye() {
				const res = await shouyeApi()
				this.tabList[0].badge.value = res.data.qiangdan
				this.tabList[1].badge.value = res.data.baojia
				this.tabList[2].badge.value = res.data.zhipai
				this.getList();
			},
			async getIndex() {
				const res = await orderApi()

			},
			changeTab(item) {
				console.log(item);
				if (item.orderType === this.orderType) {
					return
				} else {
					this.orderType = item.orderType
					this.status = 'loading'
					this.orderList = []
					this.pageNum = 1;
					this.getList();
				}
			},
			orderGo(name) {
				uni.navigateTo({
					url: `/pages/order/order?name=${name}`
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail'
				})
			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding-bottom: 31rpx;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
	}

	.nav-serch {
		background: #FFFFFF;
		border-radius: 35rpx;
		display: flex;
		align-items: center;
		padding-left: 23rpx;
		font-size: 27rpx;
		color: #999999;
		overflow: hidden;
	}

	.hom-top {
		width: 100vw;
		padding: 31rpx;
		background: #FFFFFF;
	}

	.top-text {
		font-weight: 500;
		font-size: 31rpx;
		color: #000000;
	}

	.top-item {
		width: 219rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 23rpx;
		color: #000000;
		position: relative;

		image {
			width: 70rpx;
			height: 70rpx;
		}

		.item-title {
			margin-top: 5rpx;
		}
	}

	.home-middle {
		width: 100vw;
		padding: 23rpx;
	}

	.middle-item {
		width: 219rpx;
		height: 219rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 50rpx;
		color: #000000;

		.item-title {
			font-size: 23rpx;
			color: #666666;
			margin-top: 8rpx;
		}
	}

	.order-list {
		margin: 0 auto;
		width: 688rpx;
		padding: 23rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 23rpx;

		.mine-avatar {
			display: flex;

			.avatar-text {
				flex: 1;
				margin-left: 27rpx;
				font-size: 23rpx;
				color: #999999;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.text-ovew {
				width: 465rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

		}

		.order-pay {
			display: flex;
			justify-content: flex-end;
			font-size: 27rpx;
			color: #000000;
			margin-top: 15rpx;
		}

		.order-but {
			display: flex;
			margin-top: 23rpx;

			.but-list {
				margin-left: auto;
				display: flex;
			}

			.but-item {
				width: 154rpx;
				margin-left: 23rpx;
			}

			& ::v-deep .u-button {
				height: 65rpx !important;
			}

			& ::v-deep .u-button--info {
				color: #000000 !important;
			}
		}


	}




	.content ::v-deep .u-badge {
		background-color: #FF3902 !important;
	}
</style>